<template>
  <div class="sale_count_detail">
    <search @search="search" />
    <div class="charts_box">
      <div class="left_chart">
        <div class="detail_chart_title">线上线下销售占比</div>
        <div class="chart_box" id="saleCountChart1"></div>
      </div>
      <div class="right_chart">
        <div class="detail_chart_title">第一产业销售占比</div>
        <common-chart :progressValue="60.1" id="rateAnalysisChart2" />
      </div>
    </div>
    <div class="charts_box">
      <div class="left_chart">
        <div class="detail_chart_title">第二产业销售占比</div>
        <common-chart
          :progressValue="15.5"
          :option="rateAnalysisColorOptions[0]"
          id="rateAnalysisChart3"
        />
      </div>
      <div class="right_chart">
        <div class="detail_chart_title">第三产业销售占比</div>
        <common-chart
          :progressValue="25.4"
          :option="rateAnalysisColorOptions[1]"
          id="rateAnalysisChart4"
        />
      </div>
    </div>
    <div class="bottom_table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="rank" label="排名">
          <template slot-scope="scope">
            <div :class="[scope.row.rank < 4 ? 'icon_hg' : 'icon_bg', 'd_c']">
              <span>{{ scope.row.rank }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" width="250">
          <template slot-scope="scope">
            <div
              class="row_1_ellipsis"
              :title="scope.row.productName"
              v-html="scope.row.productName"
            ></div>
          </template>
        </el-table-column>
        <el-table-column prop="companyName" label="企业名称" width="250">
          <template slot-scope="scope">
            <div
              class="row_1_ellipsis"
              :title="scope.row.companyName"
              v-html="scope.row.companyName"
            ></div>
          </template>
        </el-table-column>
        <el-table-column prop="saleCount" label="销售额（万元）">
        </el-table-column>
        <el-table-column prop="saleFrom" label="销售渠道">
          <template slot-scope="scope">
            <div v-html="computeSaleForm(scope.row)"></div>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="时间"> </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="30">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Search from "./Search.vue";
import CommonChart from "./CommonChart.vue";
export default {
  components: { Search, CommonChart },
  data() {
    return {
      show: false,
      rateAnalysisColorOptions: [
        {
          mainColor: "#0AFBFC",
          progressBgColor: "#055E86",
          bigProgressColor: "#0984A2",
          highLightColors: ["#021C5F", "#0AFAFC"],
          gradientShallowColor: "#020B49",
          gradientDeepColors: ["#03275D", "#043B6C"],
        },
        {
          mainColor: "#F4AF07",
          progressBgColor: "#574432",
          bigProgressColor: "#69502C",
          highLightColors: ["#021C5F", "#F3AE07"],
          gradientShallowColor: "#020B49",
          gradientDeepColors: ["#1E1D3F", "#332B3A"],
        },
      ],
      tableData: [
        {
          saleCount: "5250.00",
          productName: "电动牙刷",
          companyName: "怀仁市普陀公司",
          saleFrom: "沃尔玛",
          time: "2022-09-21",
          rank: 1,
        },
        {
          saleCount: "452.00",
          productName: "猫山牛奶",
          companyName: "吉时利公司",
          saleFrom: "乐购超市",
          time: "2022-09-21",
          rank: 2,
        },
        {
          saleCount: "358.00",
          productName: "柠檬咖啡",
          companyName: "乐哈哈公司",
          saleFrom: "华润超市",
          time: "2022-09-21",
          rank: 3,
        },
        {
          saleCount: "100.00",
          productName: "金矿手表",
          companyName:
            "怀仁市苦身焦思数据数控技术看就看是框架看着就困开普陀公司",
          saleFrom: "美宜佳",
          time: "2022-09-21",
          rank: 4,
        },
        {
          saleCount: "5250.00",
          productName: "长山半岛天矿自然无添加剂哈哈哈哈哈蒸馏水",
          companyName: "怀仁市普陀公司",
          saleFrom: "沃尔玛",
          time: "2022-09-21",
          rank: 5,
        },
        {
          saleCount: "5250.00",
          productName: "金矿手表",
          companyName:
            "怀仁市苦身焦思数据数控技术看就看是框架看着就困开普陀公司",
          saleFrom: "沃尔玛",
          time: "2022-09-21",
          rank: 6,
        },
        {
          saleCount: "5250.00",
          productName: "长山半岛天矿自然无添加剂哈哈哈哈哈蒸馏水",
          companyName: "怀仁市普陀公司",
          saleFrom: "沃尔玛",
          time: "2022-09-21",
          rank: 7,
        },
        {
          saleCount: "5250.00",
          productName: "长山半岛天矿自然无添加剂蒸馏水",
          companyName:
            "怀仁市苦身焦思数据数控技术看就看是框架看着就困开普陀公司",
          saleFrom: "沃尔玛",
          time: "2022-09-21",
          rank: 8,
        },
      ],
    };
  },
  computed: {
    computeSaleForm() {
      return (obj) => {
        let res = "<span style='color:#108EE9'>${obj.saleFrom}</span>";
        if (obj.rank == 1) {
          res = `<span style='color:#FE5500'>${obj.saleFrom}</span>`;
        } else if (obj.rank == 2 || obj.rank == 3 || obj.rank == 4) {
          res = `<span style='color:#2EBA07'>${obj.saleFrom}</span>`;
        } else {
          res = `<span style='color:#108EE9'>${obj.saleFrom}</span>`;
        }
        return res;
      };
    },
  },
  // watch: {
  //   show(newV) {
  //     if (newV) {
  //       this.$nextTick(() => {
  //         this.renderSaleCountChart1();
  //       });
  //     }
  //   },
  // },
  mounted() {
    this.$nextTick(() => {
      this.renderSaleCountChart1();
    });
  },
  methods: {
    renderSaleCountChart1() {
      let myChart = this.$echarts.init(
        document.getElementById("saleCountChart1")
      );
      var colorList = [
        "#3AA1FF",
        "#FFB500",
        "#3feed4",
        "#3bafff",
        "#f1bb4c",
        "#aff",
        "rgba(250,250,250,0.5)",
      ];

      const datas = [
        {
          name: "线上销售",
          value: 4271.372,
        },
        {
          name: "线下销售",
          value: 2342,
        },
      ];
      let sum = 0;
      for (var i of datas) {
        sum += i.value;
      }
      const title = {
        name: "总销售额",
        value: sum,
        unit: "万元",
      };
      const rich = {
        name: {
          color: "#7FAAE9",
          fontSize: 14,
          align: "left",
          padding: [0, 10, 20, 0],
        },
        value: {
          color: "#fff",
          fontSize: 24,
          align: "left",
        },
        title: {
          color: "#7FAAE9",
          fontSize: 14,
        },
        titleUnit: {
          color: "#7FAAE9",
          fontSize: 14,
          padding: [15, 0, 0, 0],
        },
        titleValue: {
          color: "#fff",
          fontSize: 18,
          fontWeight: 600,
          padding: [15, 5, 5, 5],
        },
      };
      let option = {
        grid: {
          bottom: 150,
          left: 0,
          right: "10%",
        },
        legend: {
          show: true,
          orient: "vertical",
          top: "middle",
          right: "5%",
          itemGap: 40,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            color: "#f2f2f2",
            rich: {
              name: {
                fontSize: 14,
                padding: [0, 20, 0, 0],
                color: "#AED0EF",
              },
              value: {
                fontSize: 14,
                color: "#fff",
                padding: [0, 0, 0, 0],
              },
              a: {
                fontSize: 14,
                color: colorList[0],
                padding: [0, 0, 0, 0],
              },
              b: {
                fontSize: 14,
                color: colorList[1],
                padding: [0, 0, 0, 0],
              },
            },
          },
          icon: "roundRect",
          formatter: function (name) {
            let str = "";
            let res = datas.filter((v) => v.name === name);
            if (res.length == 1) {
              str = "{name|" + name + " }{value|" + res[0].value + "}";
              let rate = ((res[0].value / sum) * 100).toFixed(2) + "%";
              switch (name) {
                case "线上销售":
                  str = "{name|" + name + " }{a|" + rate + "}";
                  break;
                case "线下销售":
                  str = "{name|" + name + " }{b|" + rate + "}";
                  break;
              }
              return str;
            }
            return str;
          },
        },
        series: [
          // 主要展示层的
          {
            radius: ["60%", "85%"],
            center: ["30%", "55%"],
            type: "pie",
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
                length: 35,
                length2: 100,
                lineStyle: {
                  color: "#d3d3d3",
                },
                align: "right",
              },
              color: "#000",
              emphasis: {
                show: true,
              },
            },
            data: datas,
          },
          // 边框的设置
          {
            radius: ["60%", "70%"],
            center: ["30%", "55%"],
            type: "pie",
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            animation: false,
            tooltip: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0.5)",
              },
            },
            data: [
              {
                value: 1,
              },
            ],
          },
          {
            type: "pie",
            radius: ["60%", "70%"],
            center: ["30%", "55%"],
            data: datas,
            itemStyle: {
              normal: {
                color: function (params) {
                  color: "rgba(250,250,250,0.5)";
                },
              },
            },
            label: {
              show: true,
              position: "center",
              formatter: () =>
                `{titleValue|${title.value}}\n{title|${title.name}}\n{titleUnit|(${title.unit})}`,
              rich,
            },
          },
        ],
      };
      myChart.setOption(option, { notMerge: true });
    },
    search(data) {
      console.log(data);
    },
  },
};
</script>
<style lang="scss">
.sale_count_detail {
  .el-table {
    background-color: unset !important;
  }

  .el-table tr {
    background-color: unset !important;
    color: #5187c2 !important;
  }

  .el-table th {
    background-color: unset !important;
    color: #aed0ef !important;
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td :hover {
    background-color: none !important;
  }

  .el-table td,
  .el-table th.is-leaf {
    border-bottom: none !important;
  }

  .el-table tbody tr:hover > td {
    background-color: unset !important;
  }

  .el-table::before {
    content: "";
    position: absolute;
    background-color: unset !important;
    z-index: 1;
  }
}
</style>
<style lang="scss" scope>
.sale_count_detail {
  width: 1072px;
  padding: 0 30px;
  // height: 1076px;
  .charts_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    .detail_chart_title {
      width: 399px;
      height: 42px;
      background-image: url("@/assets/img/pop_tit.png");
      text-align: left;
      padding: 12px 0 0 50px;
    }
    .left_chart {
      width: 46%;
      .chart_box {
        height: 200px;
        width: 100%;
      }
    }
    .right_chart {
      width: 46%;
      .chart_box {
        height: 200px;
        width: 100%;
      }
    }
  }
  .bottom_table {
    width: 100%;
    .icon_hg {
      width: 29px;
      height: 21px;
      background-image: url("@/assets/img/huangguan.png");
      background-size: cover;
      color: #030d47;
      font-weight: 700;
      font-size: 12px;
      span {
        margin-top: 5px;
      }
    }
    .icon_bg {
      height: 18px;
      width: 18px;
      background-image: url("@/assets/img/xh_1.png");
      background-size: cover;
      font-size: 14px;
      color: #b8ddfe;
      margin-left: 4px;
    }
  }
}
</style>